html {
  width: 100%;
  height: 100%;
  min-width: 850px;
}
body {
  font-family: "Helvetica Neue", Arial, "Microsoft YaHei", SimHei, "LiHei Pro Medium", STXihei, sans-serif;
  font-size: 14px;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
}


.layout-top {
  width: 100%;
  height: 80px;
  background-color: #1D87BD;
  background-image: -webkit-linear-gradient(top, #1e88bd, #1d87bd 59%, #1376a8), linear-gradient(top, #1e88bd, #1d87bd 59%, #1376a8);
  color: #333;
}

.layout-top h1{
  margin-top: 15px;
  margin-left: 15px;
}

.layout-top .logo-bar{
  float: left;
  width: 315px;
  height: 70px;
  color: #fff;
}

.layout-top .logo-bar h1{
  font-size: 30px;
  font-weight: 900;
  text-shadow: 0 0 1px #000;
}
.layout-top .menu-bar {
  float: left;
  height: 70px;
  list-style: none;
  min-width: 700px;
}
.layout-top .menu-bar li.dropdown {
  width: 20%;
  height: 70px;
  position: relative;
  float: left;
}

.layout-top .menu-bar>ul>li {
  float: left;
  list-style: none;
  text-align:center;
  color:#333;
}

.layout-top .menu-bar>ul>li a{
  color:#ffffff;
  float:none;
  text-decoration: none;
  display:inline-block;
  width:100%;
  line-height: 35px;
  height:100%;
}

#bd-navMenuHeader .menu-bar>ul>li>a>i.glyphicon{
  display: block;
  background-image: url(../images/topbar/springs-icon.png);
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  top:6px;
}

#bd-navMenuHeader .menu-bar>ul>li>a>i.mapicon{
  display: block;
  background-image: url(../images/topbar/maps-icon.png);
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  top:6px;
}
/*lc*/
#bd-navMenuHeader .menu-bar>ul>li>a>i.table{
  display: block;
  background-image: url(../images/topbar/table.png);
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  top:6px;
}
#bd-navMenuHeader .menu-bar>ul>li>a>i.log{
  display: block;
  background-image: url(../images/topbar/log.png);
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  top:6px;
}
#bd-navMenuHeader .menu-bar>ul>li>a>i.line{
  display: block;
  background-image: url(../images/topbar/line.png);
  width: 100%;
  height: 35px;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  top:6px;
}
#ul-top-menu .table.bg_table{
  background-position:50% 8px;
}
#ul-top-menu .log.bg_log{
  background-position:50% 8px;
}
#ul-top-menu .line.bg_line{
  background-position:50% 8px;
}
/*add logout style by zhang*/
.user-menu {
  display: inline-block;
  margin-top: 22px;
  margin-right: 41px;
  float: right;
  list-style: none;
  padding: 0;
}

.user-menu a {
  color: #fff;
}

.user-menu a:hover, .user-menu a:focus {
  text-decoration: none;
}
/*end*/
#bd-navMenuHeader .logoImage{
  float:left;
  height: 70px;
  line-height: 70px;
  margin: 0;
  width: 72px;
  background:url(../images/topbar/logo_default-4.png)  left center no-repeat;
  display:inline-block;
  overflow:hidden;
  position: relative;
}

#ul-top-menu  .glyphicon.tables_stacks{
  background-position:50% 0;
}
#ul-top-menu .glyphicon.location{
  background-position:50% -35px;
}

#ul-top-menu .glyphicon.classy_icons_041{
  background-position:50% -70px;
}
/*zhang*/
#ul-top-menu .glyphicon.classy_icons_042{
  background-position:50% -174px;
}

#ul-top-menu .glyphicon.classy_icons_043{
  background-position:50% -210px;
}

#ul-top-menu .glyphicon.classy_icons_05{
  background-position:50% -105px;
}

#ul-top-menu .glyphicon.classy_icons_06{
  background-position:50% -140px;
}

#ul-top-menu .mapicon.maps{
  background-position:50% 8px;
}

.layout-center-tabhead {
  position: absolute;
  top: 70px;
  right: 0;
  left: 0;
  height: 35px;
  width: 100%;
  background: url(../images/topbar/tile_tab_bg.png) 0 0 repeat;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75) inset;
}
.layout-center {
  position: absolute;
  top: 80px;
  right: 0;
  bottom: 26px;
  left: 0;
}
.layout-center-map {
  position: absolute;
  top: 30px;
  right: 0;
  bottom: 0;
  left: 0;
}
.layout-center #MapContainer{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.layout-monitor{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  overflow: hidden;
  background-color: #fff;
  padding-top: 4px;
}

.layout-monitor.layout-monitor-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  overflow: hidden;
  background-color: #fff;
  padding-top: 4px;
}

.layout-monitor.layout-monitor-status-header {
  background: linear-gradient(to bottom, #ffffff 0, #e2e4e7 100%);
}


.layout-monitor .monitor-table-wrap {
  height: 200px;
  border-top: 1px solid #999;
  position: relative;
}

.panel-title {
  font-size: 13px;
  font-weight: bold;
  color: #777;
  height: 16px;
  line-height: 16px;
}

.panel-tool {
  position: absolute;
  right: 5px;
  top: 10px;
  margin-top: -8px;
  height: 16px;
  overflow: hidden;
}

.panel-tool a {
  display: inline-block;
  width: 16px;
  height: 16px;
  opacity: 0.6;
  filter: alpha(opacity=60);
  margin: 0 0 0 2px;
  vertical-align: top;
}

.layout-button-up {
  background: url('../images/layout_arrows.png') no-repeat -16px -16px;
}
.layout-button-down {
  background: url('../images/layout_arrows.png') no-repeat -16px 0;
}

.layout-center-left{
  position: absolute;
  top: 0;
  right: 275px;
  bottom: 0;
  left: 0;
}

.layout-center-resizer{
  background-color: #758aa9;
  position: absolute;
  right: 270px;
  cursor: default;
  width: 5px;
  top: 0;
  bottom: 0;
}
.layout-center-resizer-button {
  position: absolute;
  display: block;
  cursor: pointer;
  visibility: visible;
  height: 70px;
  width: 5px;
  top: 261px;
  left: 0px;
}
.layout-center-resizer-button-open {
  background: url(../images/toggle-rt.gif) no-repeat center left;
}
.layout-center-resizer-button-close {
  background: url(../images/toggle-lt.gif) no-repeat center right;
}

.layout-center-right-side{
  position: absolute;
  top: 0;
  width: 270px;
  bottom: 0;
  right: 0;
  background-color: #fff;
  border-left: 1px solid #666;
}

.layout-tree{
  height: 75%;
  overflow-y:scroll;
}

.layout-bottom {
  position: absolute;
  top: 99px;
  right: 0;
  bottom: 26px;
  left: 0;
}

.layout-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 26px;
  line-height: 26px;
  background: #666;
  color: #fff;
  text-align: center;
}

.BMap_stdMpPan {
  width: 44px;
  height: 44px;
  overflow: hidden;
  background: url(../images/mapctrls.png) no-repeat;
}

.BMap_stdMpPan .BMap_button {
  height: 15px;
  width: 15px;
}

.BMap_panN {
  left: 14px;
  top: 0;
}

.BMap_panW {
  left: 1px;
  top: 12px;
}

.BMap_panE {
  left: 27px;
  top: 12px;
}

.BMap_panS {
  left: 14px;
  top: 25px;
}


/*statusShow*/
.layout-center-vertical{
  background-color: #c4c4c4;
  border-bottom-style: outset;
  position: absolute;
  right: 50%;
  /* cursor: default;*/
  width: 5px;
  top: 0px;
  bottom: 0;
  z-index:1;
}
.layout-center-horizontal{
  background-color: #c4c4c4;
  border-bottom-style: outset;
  position: absolute;
  height: 5px;
  left:0;
  right: 0;
  top: 50%;
  z-index:1;
}
.layout-grid-lfet1{
  position: absolute;
  top: 0px;
  width: 50%;
  bottom: 50%;
  left:0 ;
  background-color: #Fafafa;
  /* border-right: 1px solid #666;*/
  z-index: 0;
}
.layout-grid-lfet2{
  position: absolute;
  top: 50%;
  width: 50%;
  bottom: 0;
  left:0 ;
  background-color: #Fafafa;
  /* border-top: 1px solid #666;*/
  z-index: 0;
}
.layout-grid-right1{
  position: absolute;
  top: 0px;
  width: 50%;
  bottom: 50%;
  right:0 ;
  background-color: #Fafafa;
  /*border-bottom: 1px solid #666;*/
  z-index: 0;
}
.layout-grid-right2{
  position: absolute;
  top: 50%;
  width: 50%;
  bottom: 0;
  right:0 ;
  background-color: #Fafafa;
  /*border-left: 1px solid #666;*/
  z-index: 0;
}
.C_btn{
  float:right;
  position: relative;
  bottom: 0;
}
.S_btn{
  float: right;
  position: relative;
}
.myCsel{
  position: relative;
  top:0;
  width: 100%;
  buttom:0;
  height: 100%;
}
.modalshow{
  width: 100%!important;
  height: 95%;
}
.modal-content{
  height: 100%;
}
.modal-body{
  height: 95%;
}

.layout-grid-right2 .table_div,.layout-grid-lfet2 #canvas{
  width: 100%;
  font-size: 14px;
}
.myCsel .item .table_div{
  width: 80%;
  margin-left: 10%;
  font-size: 16px;
}
.am-modal-hd{
  border:solid 1px #c4c4c4;
}
.alarm-corner-status{
  position: absolute;bottom: 0px;width: 100%;
  background: white;
}
.alarm-corner{
  position: absolute;bottom: 0px; height: 25%;;
  width: 269px;border-top: #758AA9 solid 7px;
  margin-bottom: 0px;
}
.alarm-corner-body{
  overflow: auto;
  height: 100%;
}
.am-form-group {
  margin-bottom: 0.5em;
}

.layout-Legend {
  position: fixed;
  bottom: 25px;
  right: 16px;
  line-height: 26px;
  /* background: rgba(102, 102, 102, 0.1); */
  color: #fff;
  text-align: right;
}

.liLayout{
  padding-left: 20px;
  padding-right: 20px;
  /*margin: 5px;*/
}


#toolbar{
  position: absolute;
  top: 2px;
  left: 87px;
  height: 30px;
  z-index: 11;
  margin: 0;
  -webkit-user-select: none;
}

#toolbar .btn-group{
  border-radius: 4px;
}

#toolbar button{
  background-color: #fff;
  border: 1px solid #999;
  padding-top: 0;
  padding-bottom: 0;
  height: 26px;
  margin-right: 5px;
  line-height: 26px;
  float: left;
  font-size: 12px;
  border-radius: 3px;
  box-shadow: 0 0 5px #777;
}

#toolbar button:hover{
  background-color: #eee;
  border-color: #777;
}

#toolbar button:active{
  background-color: #ededed;
  border-color: #666;
  box-shadow: 0 0 2px #666;
}

#toolbar button > input{
  display: inline-block;
  width: 64px;
}
#toolbar span{
  height:24px;
  float: left;
  width: 20px;
}

#toolbar span{
  height:24px;
  float: left;
  width: 20px;
}
.a-measure-length{
  background: url(../images/toolbar/icons_pl.png) -5px -91px no-repeat;
}

.a-measure-area{
  background:url(../images/toolbar/icons_pl.png) -7px -272px no-repeat;
}

.a-cancel-all{
  cursor: pointer;
  background: url(../images/toolbar/icons_pl.png) -5px -571px no-repeat;
}

.a-add-point{
  background: url(../images/toolbar/us_sign_16b1fce.png) -12px -33px no-repeat;
}

.a-download-map{
  background:url(../images/toolbar/us_sign_16b1fce.png) -12px -33px no-repeat;
}

.tfRightDiv {
  position: absolute;
  right: 2px;
  height: 515px;
  width: 295px;
  z-index: 1000;
  border: thin solid #959095;
  top: 125px;
  box-shadow: 0px 0px 10px #5A6A81;
}


.LabelList {
  height: 30px;
  line-height: 30px;
  position: absolute;
  top: 90px;
  z-index: 1;
  display: none;
}

.LabelList ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

.LabelList ul li {
  border: 1px solid #bccfeb;
  float: left;
  height: 30px;
  padding-left: 3px;
  width: 70px;
  box-shadow: 0 0 10px #5a6a81;
  background-color: #BBC9DE;
}

.LabelList ul li:hover {
  background-color: #E3E8F0;
  cursor: pointer;
}

.LabelList ul li:active {
  background-color: #d0d3cf;
}

.sqDiv {
  position: absolute;
  right: 2px;
  height: 250px;
  width: 295px;
  z-index: 1000;
  border: thin solid #959095;
  top: 125px;
  box-shadow: 0px 0px 10px #5A6A81;
  display: none;
}

.sqTop {
  height: 50px;
  width: 100%;
}

.sqHeader {
  height: 33px;
  background-color: #DFDFDF;
  text-indent: 10px;
  line-height: 33px;
  border: 1px solid #E0C9C9;
}

.sqHeader:hover {
  cursor: pointer;
}

.sqContent {
  background-color: #FFF;
  height: 28px;
  border: 1px solid rgb(213, 196, 196);
}

.sqContent input {
  margin: 8px 3px 3px 60px;
}

.sqMain {
  height: 190px;
  width: 295px;
  background-color: #FBF9F9;
}

.sqSplitDiv {
  background-image: url(../images/splitShow.png);
  position: absolute;
  right: 0px;
  top: 124px;
  z-index: 1000;
  height: 78px;
  width: 30px;
  display: none;
}

.sqSplitDiv:hover {
  cursor: pointer;
}

/*
控制播放暂停*/
.mp-controller{
  padding-left: 34px;
  margin-bottom: 10px;
}

.mp-controller button{
  background-color: #fff;
  border: 1px solid #999;
  padding-top: 0;
  padding-bottom: 0;
  height: 34px;
  margin-right: 30px;
  line-height: 26px;
  float: left;
  font-size: 23px;
  border-radius: 3px;
  box-shadow: 0 0 5px #777;
}


.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}

/*
倒计时控件*/
.game_time {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 46%;
  left: 40%;
  text-align: center;
}

/* time scroll*/
.pie {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50px;
  position: absolute;
}

.pie1 {
  clip: rect(0px,100px,100px,50px);
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  background-color: #fff;
}

.pie2 {
  clip: rect(0px,50px,100px,0px);
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  background-color: #fff;
}

.hold {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 1;
}

.bg {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  position: absolute;
  background-color: #d13c36;
}

.time {
  width: 80px;
  height: 80px;
  margin: 10px 0 0 10px;
  background-color: #e45534;
  border-radius: 80px;
  position: absolute;
  z-index: 1;
  text-align: center;
  line-height: 80px;
  font-size: 30px;
}
